<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<div>
		    <div style="display: flex; margin-bottom: 10px;">
		        <u-input v-model="keyword1" placeholder="件号,多个用逗号隔开" style="flex: 0 0 50%;"></u-input>
		        <u-input v-model="keyword2" placeholder="材料类别" style="flex: 1;"></u-input>
		        <u-input v-model="keyword3" placeholder="材料编码" style="flex: 1;"></u-input>
		    </div>
		    <u-search v-model="keyword" :showAction="true" actionText="搜索"
		     :animation="false" placeholder="设备关键字搜索" @custom="custom"></u-search>
		</div>
		<!-- <view class="top" style="display: initial;"> -->
			<view class="two" style="">
				<view class="" style="">
					<view class="two-oneLeft" style="width: 240rpx;">明细 :</view>
					<view class="table-container" style="margin-left: 0rpx;">
						<uni-table ref="table" border stripe type="selection" @selection-change="selectionChange"
							emptyText="暂无更多数据" style="height: 938rpx;">
							<uni-tr >
								<!-- <uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">地点</uni-th> -->
								<uni-th width="100" :sortable="false">件号</uni-th>
								<uni-th width="100" :sortable="false">材料名称</uni-th>
								<uni-th width="100" :sortable="false">材质/牌号</uni-th>
								<uni-th width="100" :sortable="false">规格型号</uni-th>
								<uni-th width="100" :sortable="false">数量</uni-th>
								<uni-th width="100" :sortable="false">材料类别</uni-th>
								<uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">设备号</uni-th>
								<uni-th width="100" :sortable="false">设备名称</uni-th>
								<uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">材料编码</uni-th>
								<!-- <uni-th width="100" :sortable="false">技术标准</uni-th> -->
								<!-- <uni-th width="100" :sortable="false">附加技术要求</uni-th> -->
								<!-- <uni-th width="100" :sortable="false">设备图号</uni-th> -->
								<!-- <uni-th width="100" :sortable="false">零件名称</uni-th> -->
							</uni-tr>
							<uni-tr v-for="(item,index) in tableData" id='index' style="">
								<!-- <uni-td>{{item.YFCY}}</uni-td> -->
								<uni-td>{{item.YJH}}</uni-td>
								<uni-td>{{item.YCLDES}}</uni-td>
								<uni-td>{{item.YCZPH}}</uni-td>
								<uni-td>{{item.YGGXH}}</uni-td>
								<uni-td>{{item.YJSQTY}}</uni-td>
								<uni-td>{{item.TCLCOD}}</uni-td>
								<uni-td>{{item.YSBITM}}</uni-td>
								<uni-td>{{item.YSBDES}}</uni-td>
								<uni-td>{{item.YCLITM}}</uni-td>
								<!-- <uni-td>{{item.YJSBZ}}</uni-td> -->
								<!-- <uni-td>{{item.YFJJSYQ}}</uni-td> -->
								<!-- <uni-td>{{item.YITMTH}}</uni-td> -->
							    <!-- <uni-td>{{item.YLJDES}}</uni-td> -->
							</uni-tr>
						</uni-table>
						<view class="uni-pagination-box" style="">
							<uni-pagination show-icon :page-size="pageSize"
								:current="pageCurrent" :total="total"
								@change="change"/>
						</view>
					</view>
				</view>
			</view>
		<!-- </view> -->
		<view class="btnBox" style="margin-top: 80rpx;">
			<view class="btnBox-right" style="margin-left: 510rpx;">
				<u-button class="rgzxBox-btn2" type="primary"
					@click="okBtn">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'
	export default {
		data() {
			return {
				dataFormat:{},
				STOFCY:"",
				isFilter:false,
				keyword:'',
				keyword1:'',
				keyword2:'',
				keyword3:'',
				userInfo: {},
				isClick: false,
				searchVal: '',
				tableData: [],
				tableDataAll: [],
				dataList:[],
				// 每页数据量
				pageSize: 100,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		onLoad(query) {
		  if (query?.dataFormat) {
		    try {
		      const { dataFormat, dataList } = JSON.parse(query.dataFormat);
		      this.dataFormat = dataFormat;
		      this.dataList = dataList;
		      
		      const { yfjh: keyword1, yflb: keyword2, yfsb: keyword } = this.dataFormat || {};
		      this.keyword1 = keyword1 || '';
		      this.keyword2 = keyword2 || '';
		      this.keyword = keyword || '';
		      
		      if (keyword1 || keyword2 || keyword) {
		        this.init();
		      }
		    } catch (e) {
		      console.error('解析dataFormat失败:', e);
		    }
		  }
		},
		methods: {
			async custom(val){
				this.isFilter=false
				this.$refs.table.clearSelection()
				this.selectedIndexs=[]
				this.tableDataAll=[]
				let GRP = {GRP1: [{
					YJH:this.keyword1,
					TCLCOD:this.keyword2,
					YCLITM:this.keyword3,
					YSBITM:this.keyword,
					YFCY:this.dataFormat.FCY,
					}]}
				let res = await this.$api.x3.x3request("WSLISTSQL2",GRP)
				// 请求成功的处理逻辑
				console.log("this.tableDataAll",res)
				let resR1 = JSON.parse(res.message)
				
				this.tableDataAll= resR1.GRP1
				
				this.getData(1)
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			filterchange(e){
				this.isFilter=true
				// console.log("filter-change",e)
				this.$refs.table.clearSelection()
				this.searchVal=e.filter
				this.search()
			},
			// 分页触发
			change(e) {
				console.log('change',e)
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				var tableData = this.tableDataAll
				const { pageSize, pageCurrent, success, value } = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.YCLITM.indexOf(value) !== -1 | item.YSBITM.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}
				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			async init(){
				this.isFilter=false
				let GRP = {GRP1: [{
					YJH:this.keyword1,
					TCLCOD:this.keyword2,
					YCLITM:this.keyword3,
					YSBITM:this.keyword,
					YFCY:this.dataFormat.FCY,
					}]}
				let res = await this.$api.x3.x3request("WSLISTSQL2",GRP)
				// 请求成功的处理逻辑
				let resR1 = JSON.parse(res.message)
				this.tableDataAll= resR1.GRP1
				this.getData(1)
			},
			async okBtn(){
				 var djmx = this.selectedItems()
				 var dataT={}
				 dataT.dataModList=djmx
				 dataT.dataFormat=this.dataFormat
				 dataT.dataList=this.dataList
				 uni.navigateTo({url:"/pages/yssqPages/yssqPages?dataT="+JSON.stringify(dataT)})
			},
		}
	}
</script>

<style scoped>
	.dropdown-popup-right{
		right: auto;
	}
table{
	border-collapse: collapse;
	text-align: center;
}
table1,th,td{
	border: 1px solid gainsboro ;
}
.table-container {
  /* width: 620px; */
  overflow: visible;
	background-color: white;
	height: 1000rpx;display: contents;
}

table1 {
  width: 95%; /* 表格宽度占满容器 */
  table-layout: fixed; /* 固定表格布局 */
}

td1 {
  width: 25%; /* 每列宽度为容器宽度的四分之一 */
}
.top{
	width: 90%;
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.topOne-left{
	width: 200rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.topOne-right{
	width: 400rpx;
	text-align: center;
	padding-top: 20rpx;
	color: gray;
	font-size: 28rpx;
}
.two{
	background-color: white;
}
.two-one{
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2{
	background-color: white;
}
.two2-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.two2-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.wxxx{
	width: 90%;
	background-color: white;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
}
.wxxxOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.wxxxOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.ddlcjlBox{
	width: 90%;
	position: relative;
	top: 160rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 28rpx;
}
.ddlcjlBox-top{
	height: 70rpx;
	color: gray;
	text-align: center;
	font-size: 38rpx;
	padding-top: 15rpx;
}
.ddlcjlBox-two{
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
	padding-left: 15rpx;
}
.ddlcjlBox-twoLeft{
	width: 320rpx;
}
.ddlcjlBox-twoCenter{
	width: 100rpx;
}
.ddlcjlBox-twoRightr{
	width: 100rpx;
}
.bcjlBox{
    width: 90%;
	height: 70rpx;
	position: relative;
	top: 200rpx;
	margin: 0 auto;
	background-color: white;
	color: gray;
	font-size: 32rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.jlBox{
	width: 90%;
	height: 00rpx;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 42rpx;
	padding-top: 0rpx;
	padding-left: 300rpx;
}
.btnBox{
	width: 100%;
	height: 80rpx;
	position: relative;
	top: 0rpx;
	left: -270rpx;
	display: flex;
	justify-content: space-between;
}
.btnBox-left{
	width: 350rpx;
	border-right: 1px solid #ccc;
}
.btnBox-right{
	width: 450rpx;
}
::v-deep .uni-select__selector-scroll2{
    max-height: 200rpx;
}
</style>
